<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-outline-black {
            color: black;
            background-color: transparent;
            background-image: none;
            border-color: black;
            border-radius: 30px !important;

        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="ClientMain.html">图书管理系统</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="ClientRecharge.html">充值</a></li>
            <li><a href="ClientBookList.html">图书馆</a></li>
            <li><a href="ClientEdit.html">修改信息</a></li>
            <li><a href="ClientReturn.html">还书</a></li>
            <li><a href="index.html">退出登录</a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <label for="number">书号</label>
            <input class="form-control" id="number" placeholder="Search" type="text">
            <label for="name">书名</label>
            <input class="form-control" id="name" placeholder="Search" type="text">
        </div>
        <button class="btn btn-lg btn-outline-black" id="search" type="submit">查找</button>
    </form>

    <table class="table table-hover align-items-center">
        <thead>
        <tr>
            <th scope="col">订单号</th>
            <th scope="col">书号</th>
            <th scope="col">书名</th>
            <th scope="col">借出时间</th>
            <th scope="col">用户</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody id="orderList">

        </tbody>
    </table>
</div>

<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script>// 页面加载完成后执行初始化操作
$(document).ready(function () {
    init();
})

function init() {
    // 获取列表
    getOrderList();
}


function getOrderList() {
    // 发送AJAX请求获取图书列表
    $.ajax({
        url: "ClientReturnServlet",
        type: "GET",
        dataType: "json",
        success: function (data) {
            console.log(data);
            addOrderList(data);

        },
        error: function (xhr, status, error) {
            // 处理发生错误时的情况
            console.log("Error: " + error);
        }
    });
}

function addOrderList(data) {
    // 获取 tbody 元素
    const tbody = document.getElementById("orderList");
    console.log(tbody)
    // 清空表格内容
    tbody.innerHTML = "";
    // 遍历数据数组，并添加每个书籍的信息到表格行中
    for (let i = 0; i < data.orders.length; i++) {
        const order = data.orders[i];
        console.log(order)
        // 创建新的表格行
        const row = document.createElement("tr");
        // 创建单元格并设置内容
        const idCell = document.createElement("td");
        idCell.textContent = order.id;
        const numberCell = document.createElement("td");
        numberCell.textContent = order.book.number;
        const nameCell = document.createElement("td");
        nameCell.textContent = order.book.name;
        const dateCell = document.createElement("td");
        dateCell.textContent = order.orderDate;
        const userCell = document.createElement("td");
        userCell.textContent = order.client.account;
        const operationCell = document.createElement("td");
        // 添加还书按钮
        const returnButton = document.createElement("button");
        returnButton.textContent = "还书";
        returnButton.addEventListener("click", function () {
            returnBook(order.id);
        });
        operationCell.appendChild(returnButton);
        // 将单元格添加到行中
        row.appendChild(idCell);
        row.appendChild(numberCell);
        row.appendChild(nameCell);
        row.appendChild(dateCell);
        row.appendChild(userCell);
        row.appendChild(operationCell);
        // 将行添加到表格中
        tbody.appendChild(row);
    }
}

function returnBook(number) {
    $.ajax({
        url: 'BookReturnServlet',
        type: 'POST',
        dataType: 'json',
        data: {
            number: number
        },
        success: function (data) {
            if (data.msg === "success") {
                // 删除成功后的处理逻辑
                alert('还书成功：' + number);
                // 重新获取图书列表
                getBookList();
            } else if (data.msg === "fall") {
                alert("还书失败")
            }
        },
        error: function (xhr, status, error) {
            // 删除失败后的处理逻辑
            console.error('还书失败：' + number + '，错误信息：' + error);
        }
    });
}

</script>
</body>
</html>